
<template>
      <div class="info_mian">
        <div style="display: grid;gap: 20px;grid-template-columns: 1fr 1fr 1fr 1fr; margin-bottom: 20px;">
          <t-card class="p_card">
            <p class="p_title">总业绩</p>
            <p class="p_number">{{promotionCount.amount}}</p>
          </t-card>
          <t-card class="p_card">
            <p class="p_title">总订单数</p>
            <p class="p_number">{{promotionCount.num}}</p>
          </t-card>
          <t-card class="p_card">
            <p class="p_title">推广人数</p>
            <p class="p_number">{{promotionCount.user_count}}</p>
          </t-card>
          <t-card class="p_card">
            <p class="p_title">实时绑定人数</p>
            <p class="p_number">{{promotionCount.user_count}}</p>
          </t-card>

        </div>
        <div style="padding: 20px 0;">
          <t-space align="center">
            <span style="font-size: 18px">推广链接：</span>
            <span>http://blueant.pro/?code={{promotionCount.fx_code}}</span>
            <t-button @click="copyinfo('http://blueant.pro/?code='+promotionCount.fx_code)">复制</t-button>
          </t-space>
        </div>
        <div style="padding: 20px 0;">
          <p style="font-size: 18px">订单明细</p>
        </div>
        <t-table
            row-key="index"
            :data="data"
            :columns="columns"
            :stripe="stripe"
            :bordered="bordered"
            :loading="isLoading"
            :hover="hover"
            :table-layout="tableLayout ? 'auto' : 'fixed'"
            :size="size"
            :pagination="pagination"
            :show-header="showHeader"
            cell-empty-content="-"
            resizable
            lazy-load
            @page-change="onPageChange"
            :selected-row-keys="selectedRowKeys"
            maxHeight="100%"
        >
        </t-table>
      </div>
</template>
<script setup>
import {ref} from "vue";
import {get} from "@/utils/api";
import config from "@/config";
import {MessagePlugin} from "tdesign-vue-next";

const promotionCount = ref([])

get(config.promotionCount, {}).then(res => {
  promotionCount.value = res.data.data
})

//表格部分
const data = ref([])
const total = 28;


const stripe = ref(true);
const bordered = ref(false);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);
const isLoading = ref(false);
const selectedRowKeys = ref([]);
const pagination = ref({
  defaultCurrent: 1,
  defaultPageSize: 10,
  total,
});

const columns = ref([
  { colKey: 'phone', title: '手机号',width: 200},
  { colKey: 'order_no', title: '订单号',width: 200},
  { colKey: 'remark', title: '订单内容',minWidth: 200},
  { colKey: 'amount', title: '支付金额' },
  { colKey: 'create_at', title: '创建时间' },

]);
const getPromotionList = (paginationInfo)=>{
  const { current, pageSize } = paginationInfo;
  get(config.getPromotionList,{
    page:current,
    page_size:pageSize
  }).then(res=>{
    console.log("getOrderList",res)
    data.value = res.data.data.list
    pagination.value.total = res.data.data.page.total
  })
}
getPromotionList({
  current: pagination.value.current || pagination.value.defaultCurrent,
  pageSize: pagination.value.pageSize || pagination.value.defaultPageSize,
})
const onPageChange = async (pageInfo) => {
  console.log('page-change', pageInfo);
  getPromotionList(pageInfo);
};

const copyinfo = async(text) => {
  try {
    // 方案1：优先使用现代API
    if (navigator.clipboard && navigator.clipboard.writeText) {
      await navigator.clipboard.writeText(text);
    }
    // 方案2：兼容旧浏览器的降级方案
    else {
      const textArea = document.createElement('textarea');
      textArea.value = text;
      textArea.style.position = 'fixed';
      document.body.appendChild(textArea);
      textArea.select();

      const successful = document.execCommand('copy');
      if (!successful) {
        throw new Error('Copy failed');
      }
      document.body.removeChild(textArea);
    }
    MessagePlugin.success('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
    MessagePlugin.error(`复制失败: ${err.message}`);
  }
}
</script>
<style scoped>
.info_mian{
  padding: 20px 30px;
}
.p_card{
  line-height: 1.6
}
.p_number{
  font-size: 24px;
}
</style>
